<template>
	<view>
		<view class="stepper flex-row">
			<image class="stepperBtn" src="http://www.bobei.shop/static/home/sub.png" @click.stop="onSubBtn"></image>
			<input class="stepperIpt" type="number" :disabled="true" v-model="form.amount">
			<image class="stepperBtn" src="http://www.bobei.shop/static/home/add.png" @click.stop="onAddBtn"></image>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ["stepperChange", "stepperRes"],
		props: {
			amountObj: {
				type: [Number, String],
				required: true,
			},
			stepperDisabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				form: {
					amount: 0,
				},
			}
		},
		watch: {
			amountObj: {
				handler(newVal) {
					this.form.amount = newVal;
				},
				immediate: true
			}
		},
		methods: {
			onSubBtn() {
				if (!this.stepperDisabled) {
					if (this.form.amount > 0) {
						this.form.amount--;
						this.$emit("stepperChange", this.form.amount);
						this.$emit("stepperRes");
					} else {
						this.form.amount = 0;
						this.$emit("stepperChange", this.form.amount);
						this.$emit("stepperRes");
					}
				}

			},
			onAddBtn() {
				if (!this.stepperDisabled) {
					this.form.amount++;
					this.$emit("stepperChange", this.form.amount);
					this.$emit("stepperRes");
				}

			},
		},
	}
</script>

<style scoped lang="scss">
	.stepper {
		.stepperBtn {
			width: 40rpx;
			height: 40rpx;
		}

		.stepperIpt {
			width: 60rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}
	}
</style>
